body {
    max-width                  : 540px;
    min-width                  : 320px;
    margin                     : 0 auto;
    font                       : normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "MicrosoftYahei", STXihei, hei;
    color                      : #000;
    background                 : #f2f2f2;
    overflow-x                 : hidden;
    -webkit-tap-highlight-color: transparent;
}

a {
    text-decoration: none;
    color          : #222;
}

li {
    list-style: none;
}

* {
    margin : 0;
    padding: 0;
}



// 上面是全局


.search-index {
    display  : flex;
    // 固定定位跟父级没有关系，它以屏幕为准
    position : fixed;
    top      : 0;
    left     : 50%;
    transform: translateX(-50%);
    width    : 100%;
    max-width: 540px;
    min-width: 320px;
    height   : 44px;
}

.user {
    width              : 44px;
    height             : 44px;
    // background-color: purple;
    font-size          : 12px;
    text-align         : center;
    color              : #2eaae0;

    &::before {
        content        : "";
        display        : block;
        width          : 23px;
        height         : 23px;
        background     : url(../img/sprite.png) no-repeat -59px -194px;
        background-size: 104px auto;
        margin         : 4px auto -2px;
    }
}

.search {
    flex         : 1;
    position     : relative;
    height       : 26px;
    line-height  : 24px;
    border       : 1px solid #ccc;
    flex         : 1;
    font-size    : 12px;
    color        : #666;
    margin       : 7px 10px;
    padding-left : 25px;
    border-radius: 5px;
    box-shadow   : 0 2px 4px rgba(0, 0, 0, .2);

    &::before {
        content           : "";
        // display        : block;
        position          : absolute;
        top               : 6px;
        left              : 7px;
        width             : 13px;
        height            : 13px;
        background        : url(../img/sprite.png) no-repeat -59px -279px;
        background-size   : 104px auto;
    }
}

// 2. 焦点图

.focus {
    padding-top: 44px;

    img {
        width: 100%;
    }
}

// 3. 局部导航栏

.local-nav {
    display         : flex;
    height          : 64px;
    margin          : 3px 4px;
    background-color: #fff;
    border-radius   : 8px;

    li {
        flex: 1;

        &:nth-child(1) {
            span {

                &:nth-child(1) {
                    background: url(../img/1.png) center/contain no-repeat;
                }
            }
        }

        &:nth-child(2) {
            span {

                &:nth-child(1) {
                    background: url(../img/localnav_bg.png) 0 -32px/cover no-repeat;
                }
            }
        }

        &:nth-child(3) {
            span {

                &:nth-child(1) {
                    background: url(../img/localnav_bg.png) 0 -64px/cover no-repeat;
                }
            }
        }

        &:nth-child(4) {
            span {

                &:nth-child(1) {
                    background: url(../img/localnav_bg.png) 0 -96px/cover no-repeat;
                }
            }
        }

        &:nth-child(5) {
            span {

                &:nth-child(1) {
                    background: url(../img/localnav_bg.png) 0 -128px/cover no-repeat;
                }
            }
        }
    }

    a {
        display        : flex;
        height         : 100%;
        flex-direction : column;
        align-items    : center;
        justify-content: center;
        font-size      : 12px;

        span {

            &:nth-child(1) {
                width           : 32px;
                height          : 32px;
                background-color: pink;
            }
        }

    }


}


// 4. 主导航栏

nav {
    border-radius: 8px;
    margin       : 0 4px 3px;
    overflow     : hidden;

    .nav-common {
        display         : flex;
        height          : 88px;
        background-color: pink;

        &:nth-child(1) {
            background: -webkit-linear-gradient(left, #fa5a55, #fa994d);
        }

        &:nth-child(2) {
            margin    : 3px 0;
            background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
        }

        &:nth-child(3) {
            // margin    : 3px 0;
            background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
        }
    }

    .nav-items {
        flex           : 1;
        display        : flex;
        flex-direction : column;
        justify-content: center;

        a {
            flex       : 1;
            text-align : center;
            line-height: 44px;
            color      : #fff;
            font-size  : 14px;
            text-shadow: 1px 1px rgba(0, 0, 0, .2);

            &:nth-child(1) {
                border-bottom: 1px solid #fff;
            }
        }

        // -n+2就是前两个盒子；
        &:nth-child(-n+2) {
            border-right: 1px solid #fff;
        }

        &:nth-child(1) {

            a {
                border         : none;
                background     : url(../img/hotel.png) bottom center no-repeat;
                background-size: 121px auto;
            }
        }
    }
}

// 5. 侧导航栏

.subnav-entry {
    display         : flex;
    flex-wrap       : wrap;
    border-radius   : 8px;
    background-color: #fff;
    padding         : 4px 4px;

    li {
        flex         : 20%;
        // display   : flex;
        text-align   : center;

    }

    span {

        &:nth-child(1) {
            display        : block;
            width          : 28px;
            height         : 28px;
            background     : url(../img/subnav-bg.png) no-repeat;
            background-size: 28px auto;
            margin         : 3px auto 0;
        }
    }
}

// 6. 

.sales-box {
    border-top      : 1px solid #bbb;
    background-color: #fff;
    margin          : 4px;
}